<template>
    <div class="content">
        <div class="content-top">
            <div class="top-left">
                <div class="moudle-title">水 质 信 息</div>
                <div class="t-l-w">
                    <leftCenter chartId="ds" />
                    <leftCenter chartId="da" />
                </div>
                <div>
                   
                </div>
            </div>
            <div class="top-right"><rightCenter :title="'报 警 信 息'"/></div>
        </div>
        <div class="content-bottom">
            <div class="bottom-left">
                <div class="moudle-title">水 质 历 史 数 据</div>
                <div class="echats-list">
                    <div class="item"><LeftTop :chartId="'w1'"/></div>
                    <div class="item"><LeftTop :chartId="'w2'"/></div>
                    <div class="item"><LeftTop :chartId="'w3'"/></div>
                    <div class="item"><LeftTop :chartId="'w4'"/></div>
                </div>
            </div>
            <div class="bottom-right">
                <div class="moudle-title">海 生 物 历 史 数 据</div>
                <div class="echats-list">
                    <div class="item"><LeftTop :chartId="'wp1'"/></div>
                    <div class="item"><LeftTop :chartId="'wp2'"/></div>
                    <div class="item"><LeftTop :chartId="'wp3'"/></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang='ts' setup>
import LeftTop from './components/leftTop.vue'
import leftCenter from './components/leftCenter.vue'
import rightCenter from './components/rightCenter.vue'


</script>
<style lang='scss' scoped>
.content {
    color: #fff;
    height: calc(100% - 90px);

    .content-top {
        width: 100%;
        height: 35%;

        display: flex;
        justify-content: space-between;

        .top-left {
            width: 70%;
            background-image: url("../../assets/images/u34.png");
            background-size: cover;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .top-right {
            margin-left: 10px;
            width: 30%;
            background-image: url("../../assets/images/u34.png");
            background-size: cover;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    }

    .content-bottom {
        width: 100%;
        height: 64%;
        justify-content: space-between;
        display: flex;
        margin-top: calc(1% - 10px);

        .bottom-left {
            flex: 1;
            height: auto;
            margin-right: 10px;
            background-image: url("../../assets/images/u34.png");
            background-size: cover;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .bottom-right {
            flex: 1;
            height: auto;
            background-image: url("../../assets/images/u34.png");
            background-size: cover;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    }
.t-l-w{
    display: flex;
    justify-content: space-between;
    height: 90%;
}
.echats-list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    height: 95%;
    padding: 12px 30px;
    .item{
        width: 50%;
        height: 50%;
    }
}
    .moudle-title {
        color: #50e9ff;
        font-size: 16px;
        text-align: center;
    }
}
</style>
  